<template>
    <div class="card-box">
        <v-dialog :show.sync="dialogVisible" @beforeClose="beforeClose" width="1200px" title="授权物业信息">
            <div v-if="dialogVisible">
                <el-table :row-style="{height:'50px'}"
                          :data="tableData" align="center"
                          style="width: 100%">
                    <el-table-column
                        prop="propertyId"
                        width="140"
                        label="编号">
                    </el-table-column>
                    <el-table-column
                        prop="propertyName"
                        width="140"
                        label="物业名称">
                    </el-table-column>
                    <el-table-column
                        prop="propertyRightStr"
                        width="100"
                        label="物业产权">
                    </el-table-column>
                    <el-table-column
                        prop="propertyAddress"
                        width="160"
                        label="物业地址">
                    </el-table-column>
                    <el-table-column
                        prop="addressArea"
                        width="100"
                        label="物业面积">
                    </el-table-column>
                    <el-table-column
                        prop="startTime"
                        width="180"
                        label="开始时间">
                        <template slot-scope="scope">
                            <el-date-picker
                                v-model="scope.row.startTime" readonly
                                type="date"
                                placeholder="选择日期时间">
                            </el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="endTime"
                        width="180"
                        label="结束时间">
                        <template slot-scope="scope">
                            <el-date-picker
                                v-model="scope.row.endTime" readonly
                                type="date"
                                placeholder="选择日期时间">
                            </el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="authorizationUse"
                        width="140"
                        label="授权用途">
                        <template slot-scope="scope">
                            <label>
                                {{scope.row.authorizationUse|dict('authorization-use')}}
                            </label>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="practicalUse"
                        width="140"
                        label="实际用途">
                        <template slot-scope="scope">
                            {{scope.row.practicalUse|dict('practical-use')}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="useStatus" :formatter="dictVal_useStatus"
                        width="140"
                        label="使用状态">
                    </el-table-column>
                    <el-table-column
                        prop="remarks"
                        width="140"
                        label="备注">
                    </el-table-column>
                </el-table>

            </div>
            <div slot="foot">
                <el-button type="primary" size="small" @click="dialogVisible = false" style="width: 80px">关闭</el-button>
            </div>
        </v-dialog>
    </div>
</template>


<script>
    // import {getPropertyList} from "@/views/authorization-management/apply-unit/api/apply-unit.js";
    import {getDict} from "~/utils";
    import {
        getUseCard,
        // updateUseCard, getAllUnitList, checkUserCardByUpdate, changUseStatusByPid, deletePropertySingular,
        // deletePropertyPlural
    } from "@/views/authorization-management/use-card/api/use-card.js"

    export default {
        name: 'propertyView',
        data() {
            return {
                //弹出框 初始时隐藏
                dialogVisible: false,
                useCardId: '',
                //使用状态
                useStatusCode: [],
                tableDataBefroe:[],
                tableData: [],
                authorizationUseList:[],
                practicalUseList:[]


            }
        },
        mounted: function () {

        },
        created() {
            this.useStatusCode = getDict('use-status');
            this.authorizationUseList=  getDict("authorization-use");
            this.practicalUseList=  getDict("practical-use");
        },
        methods: {
            /**
             * 示新增弹框
             */
            show(rowData) {
                this.loading = false
                this.dialogVisible = true
                this.tableData = [];
                this.useCardId = rowData.useCardId
                this.query();
            },


            /**
             * 关闭弹窗
             * @param done
             */
            beforeClose(done) {
                this.dialogVisible = false
                done();
            },


            /**
             * 查询方法
             * @param param
             */
            query() {
                getUseCard(this.useCardId).then((resp) => {
                    let obj = resp.data.data;
                    // this.formObj.fileList = obj.fileList;
                    // this.formObj.useCard = obj.useCard;
                    this.tableDataBefroe = obj.useCardPropertyList;
                    if (null != this.tableDataBefroe && this.tableDataBefroe.length > 0) {
                        for (let i = 0; i < this.tableDataBefroe.length; i++) {
                            let propertyData = {
                                roomId: '',
                                propertyId: '',
                                propertyName: '',
                                propertyRight:'',
                                propertyRightStr: '',
                                propertyAddress: "",
                                addressArea: "",
                                startTime: "",
                                endTime:"",
                                authorizationUse:"",
                                practicalUse:"",
                                useStatus:"",
                                remarks:"",
                            };
                            propertyData.roomId = this.tableDataBefroe[i].roomId;
                            propertyData.propertyId = this.tableDataBefroe[i].propertyId;
                            propertyData.propertyName = this.tableDataBefroe[i].propertyName;
                            propertyData.propertyRight = this.tableDataBefroe[i].propertyRight;
                            propertyData.propertyAddress = this.tableDataBefroe[i].propertyAddress;
                            propertyData.addressArea = this.tableDataBefroe[i].addressArea;
                            propertyData.startTime = this.tableDataBefroe[i].startTime;
                            propertyData.endTime = this.tableDataBefroe[i].endTime;
                            propertyData.authorizationUse = this.tableDataBefroe[i].authorizationUse;
                            propertyData.practicalUse = this.tableDataBefroe[i].practicalUse;
                            propertyData.useStatus = this.tableDataBefroe[i].useStatus;
                            propertyData.remarks = this.tableDataBefroe[i].remarks;

                            if (propertyData.propertyRight == 1) {
                                propertyData.propertyRightStr ="自有";
                            } else if (propertyData.propertyRight == 2) {
                                propertyData.propertyRightStr ="租用";
                            } else {
                                propertyData.propertyRightStr ="其他";
                            }
                            this.tableData.push(propertyData);
                        }

                    }
                }).catch(error => {
                    this.$message({
                        type: 'error',
                        message: '使用证信息获取失败'
                    });
                }).finally(() => this.loading = false);
            },
            /**
             * 码值转换
             * @param row
             * @param column
             * @param cellValue
             * @returns {string|*}
             */
            dictVal_useStatus: function (row, column, cellValue) {
                let obj = this.useStatusCode.find(p => p.value == cellValue)
                if (obj) {
                    return obj.label
                }
                return '';
            },

        }


    }
</script>

<style scoped lang='scss'>
    

    @include formWrap();

</style>
